<!DOCTYPE html><html lang="zh-CN"><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>calendar() | Moment.js &#x6587;&#x6863;</title>
  <link rel="stylesheet" href="static/css/style.css">
  <link rel="shortcut icon" href="http://momentjs.cn/static/img/moment-favicon.png">
  <link rel="stylesheet" href="static/css/atom-one-light.min.css">
</head>
<body class="is-moment">
  <div class="hero hero-oneline">
    <div class="hero-centered">
      <h1>calendar()</h1>
    </div>
  </div>
  <div id="api-section-__FILENAME__">
    <div id="content" class="clearfix">
  
      <div id="column1" data-id="__ID__" class="interior">
        <header>
          <!-- <h1>calendar()</h1> -->
          <div id="gtoc">
            <ul>
              <!-- <li>v</li> -->
              <li>
                <a href="index.html#/displaying/calendar-time/" name="toc">&#x8FD4;&#x56DE;&#x4E0A;&#x5C42;&#x6587;&#x6863;</a>
              </li>
              <li style="border: none;">
                <a href="javascript:window.open('https://github.com/momentjscn/moment-docs-cn/edit/master/moment/04-displaying/06-calendar-time.md');" rel="nofollow" target="_blank">&#x63D0;&#x4EA4;&#x4FEE;&#x6539;</a>
              </li>
              <!-- <li>
                <a href="/search__SEARCH_PARAM__" name="toc">搜索</a>
              </li> -->
            </ul>
          </div>
          <hr>
        </header>

        <div id="biz_item"></div>
  
        <div id="apicontent">
          <div id="content_left">
							<div class="docs-method-signature">
								<pre><code class="language-js">moment().calendar();
moment().calendar(referenceTime);
moment().calendar(referenceTime, formats);  // &#x4ECE; 2.10.5 &#x5F00;&#x59CB;
</code></pre>

							</div>
<p>&#x65E5;&#x5386;&#x65F6;&#x95F4;&#x663E;&#x793A;&#x76F8;&#x5BF9;&#x4E8E;&#x7ED9;&#x5B9A;&#x7684; <code>referenceTime</code> &#x7684;&#x65F6;&#x95F4;&#xFF08;&#x9ED8;&#x8BA4;&#x4E3A;&#x73B0;&#x5728;&#xFF09;&#xFF0C;&#x4F46;&#x4E0E; <code>moment#fromNow</code> &#x7565;&#x6709;&#x4E0D;&#x540C;&#x3002;</p>
<p><code>moment#calendar</code> &#x4F1A;&#x6839;&#x636E;&#x65E5;&#x671F;&#x4E0E; <code>referenceTime</code> &#x7684;&#x65E5;&#x671F;&#xFF08;&#x9ED8;&#x8BA4;&#x4E3A;&#x4ECA;&#x5929;&#xFF09;&#x7684;&#x63A5;&#x8FD1;&#x7A0B;&#x5EA6;&#xFF0C;&#x4F7F;&#x7528;&#x4E0D;&#x540C;&#x7684;&#x5B57;&#x7B26;&#x4E32;&#x683C;&#x5F0F;&#x5316;&#x65E5;&#x671F;&#x3002;</p>
<table class="table table-striped table-bordered">
  <tbody><tr>
    <td>&#x4E0A;&#x4E2A;&#x661F;&#x671F;</td>
    <td>&#x4E0A;&#x661F;&#x671F;&#x4E00; 2:30</td>
  </tr>
  <tr>
    <td>&#x524D;&#x4E00;&#x5929;</td>
    <td>&#x6628;&#x5929; 2:30</td>
  </tr>
  <tr>
    <td>&#x540C;&#x4E00;&#x5929;</td>
    <td>&#x4ECA;&#x5929; 2:30</td>
  </tr>
  <tr>
    <td>&#x4E0B;&#x4E00;&#x5929;</td>
    <td>&#x660E;&#x5929; 2:30</td>
  </tr>
  <tr>
    <td>&#x4E0B;&#x4E2A;&#x661F;&#x671F;</td>
    <td>&#x661F;&#x671F;&#x65E5; 2:30</td>
  </tr>
  <tr>
    <td>&#x5176;&#x4ED6;</td>
    <td>7/10/2011</td>
  </tr>
</tbody></table>
<p>&#x8FD9;&#x4E9B;&#x5B57;&#x7B26;&#x4E32;&#x662F;&#x672C;&#x5730;&#x5316;&#x7684;&#xFF0C;<a href="javascript:window.open('http://nodejs.cn/s/XuUjcw');" target="_blank" rel="nofollow">&#x53EF;&#x4EE5;&#x81EA;&#x5B9A;&#x4E49;</a>&#x3002;</p>
<p>&#x4ECE; <strong>2.10.5</strong> &#x5F00;&#x59CB;&#xFF0C;moment &#x652F;&#x6301;&#x6307;&#x5B9A;&#x6BCF;&#x6B21;&#x8C03;&#x7528;&#x7684;&#x65E5;&#x5386;&#x8F93;&#x51FA;&#x683C;&#x5F0F;&#xFF1A;</p>
<pre><code class="language-javascript">moment().calendar(null, {
    sameDay: &apos;[&#x4ECA;&#x5929;]&apos;,
    nextDay: &apos;[&#x660E;&#x5929;]&apos;,
    nextWeek: &apos;dddd&apos;,
    lastDay: &apos;[&#x6628;&#x5929;]&apos;,
    lastWeek: &apos;[&#x4E0A;&#x4E2A;] dddd&apos;,
    sameElse: &apos;DD/MM/YYYY&apos;
});
</code></pre>
<p>&#x5F53; moment &#x4E0E; <code>referenceTime</code> &#x76F8;&#x8DDD;&#x8D85;&#x8FC7;&#x4E00;&#x5468;&#x65F6;&#xFF0C;&#x5219;&#x5C06; <code>sameElse</code> &#x7528;&#x4F5C;&#x683C;&#x5F0F;&#x3002;</p>
<p>&#x6CE8;&#x610F;&#xFF1A;&#x4ECE; <strong>2.14.0</strong> &#x7248;&#x672C;&#x5F00;&#x59CB;&#xFF0C;&#x65E5;&#x5386;&#x7684;&#x683C;&#x5F0F;&#x53C2;&#x6570;&#x53EF;&#x4EE5;&#x662F;&#x4E00;&#x4E2A;&#x5728; moment &#x4E0A;&#x4E0B;&#x6587;&#x4E2D;&#x4F7F;&#x7528;&#x5355;&#x4E2A;&#x53C2;&#x6570;&#x6267;&#x884C;&#x7684;&#x56DE;&#x8C03;&#xFF1A;</p>
<pre><code class="language-javascript">moment().calendar(null, {
  sameDay: function (now) {
    if (this.isBefore(now)) {
      return &apos;[&#x4ECA;&#x5929;&#x5C06;&#x4F1A;&#x53D1;&#x751F;]&apos;;
    } else {
      return &apos;[&#x4ECA;&#x5929;&#x5DF2;&#x53D1;&#x751F;]&apos;;
    }
    /* ... */
  }
});
</code></pre>
					</div>
          <div id="content_right">
							<div class="docs-method-signature">
								<pre><code class="language-js">moment().calendar();
moment().calendar(referenceTime);
moment().calendar(referenceTime, formats);  // from 2.10.5
</code></pre>

							</div>
<p>Calendar time displays time relative to a given <code>referenceTime</code> (defaults to now), but does so slightly differently than <code>moment#fromNow</code>.</p>
<p><code>moment#calendar</code> will format a date with different strings depending on how close to <code>referenceTime</code>&apos;s date (today by default) the date is.</p>
<table class="table table-striped table-bordered">
  <tbody><tr>
    <td>Last week</td>
    <td>Last Monday at 2:30 AM</td>
  </tr>
  <tr>
    <td>The day before</td>
    <td>Yesterday at 2:30 AM</td>
  </tr>
  <tr>
    <td>The same day</td>
    <td>Today at 2:30 AM</td>
  </tr>
  <tr>
    <td>The next day</td>
    <td>Tomorrow at 2:30 AM</td>
  </tr>
  <tr>
    <td>The next week</td>
    <td>Sunday at 2:30 AM</td>
  </tr>
  <tr>
    <td>Everything else</td>
    <td>7/10/2011</td>
  </tr>
</tbody></table>
<p>These strings are localized, and <a href="#/customization/calendar/" target="_blank" rel="nofollow">can be customized</a>.</p>
<p>From <strong>2.10.5</strong> moment supports specifying calendar output formats per
invocation:</p>
<pre><code class="language-javascript">moment().calendar(null, {
    sameDay: &apos;[Today]&apos;,
    nextDay: &apos;[Tomorrow]&apos;,
    nextWeek: &apos;dddd&apos;,
    lastDay: &apos;[Yesterday]&apos;,
    lastWeek: &apos;[Last] dddd&apos;,
    sameElse: &apos;DD/MM/YYYY&apos;
});
</code></pre>
<p><code>sameElse</code> is used as the format when the moment is more than a week away from the <code>referenceTime</code></p>
<p><strong>Note:</strong> From version <strong>2.14.0</strong> the formats argument to calendar can be
a callback that is executed within the moment context with a single argument
now:</p>
<pre><code class="language-javascript">moment().calendar(null, {
  sameDay: function (now) {
    if (this.isBefore(now)) {
      return &apos;[Will Happen Today]&apos;;
    } else {
      return &apos;[Happened Today]&apos;;
    }
    /* ... */
  }
});
</code></pre>
					</div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="static/js/highlight.min.js"></script>
  <script src="static/js/javascript.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  <script>var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?7a7f78c805fbacc7e075d34f153031aa"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();</script>

  <style>
    .hero-centered {
      margin: 0;
          margin-left: 10px;
    }
#gtoc ul {
  list-style: none;
  margin-left: 0;
  line-height: 1.5rem;
  padding: 0;
}
#gtoc>ul>li {
  display: inline;
  border-right: 1px solid #000;
  margin-right: .4rem;
  padding-right: .4rem;
}
#gtoc>ul>li>a {
  color: #61b2a7;
}
#content_left {
  width: 49%;float: left;border-right: 1px solid #eee;    padding-right: 2%;
}
#content_right {
float: left;width: 48%;margin-left: 3%;
}
#column1 {
  padding: 0 2rem;
}
  </style>


</body></html>